Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reorganize side nav #428

Merged
merged 10 commits into from
Feb 21, 2018
Merged

Conversation

cjcenizal
Copy link
Contributor

Fixes #416. I tried to incorporate @gchaps's idea of using as few categories as possible and some of @cchaos's original structure. I'm sure there are a bunch of ways we can make this better so shout 'em out!

Layout

Accordion
BottomBar
Card
Flex
Flyout
Header
HorizontalRule
Modal
Page
Panel
Popover
Spacer
Steps
Tables
TableOfRecords
Tabs

Content

Avatar
Badge
CallOut
Code
DescriptionList
Health
Icons
Image
Loading
Progress
Text
Title
Toast
Tooltip

Data controls

Button
Code Editor
Color Picker
ContextMenu
Expression
FilePicker
FilterGroup
Form
KeyPadMenu
Link
Pagination
SearchBar
SideNav

Utilities

Accessibility
DelayHide
ErrorBoundary
IsColorDark
OutsideClickDetector

@cchaos
Copy link
Contributor

cchaos commented Feb 21, 2018

If we go this light on the categorization, which I'm ok with, we need to also be smarter about sub-page/sections and look into which components we could probably group into one page.

For example, we could group HorizontalRule and Spacer into one "Separators" or something page. Which would then look something like:


Layout

...
Popover
Separators

  • Horizontal rule
  • Spacer

Steps
...


Then we also need to be smart about how we name our sections so that instead of this:

screen shot 2018-02-20 at 11 32 25 pm

we have something like:


Data Controls

...
Filter group
Form controls

  • Fields
  • Radios and Checkboxes
  • ...

Forms groups

  • Rows
  • Inline
  • Validation
  • ...

KeyPadMenu
...

@cjcenizal
Copy link
Contributor Author

@cchaos Great points, I agree. @gchaps What was the original intent behind fewer buckets? What are the advantages?

@snide
Copy link
Contributor

snide commented Feb 21, 2018

Can we zoom on this one real quick with everyone. Prolly a quick 10 minutes. Some questions

  1. If we're not collapsing these, does this categorization help? Should we collapse them?
  2. We prolly need to fix the titles looking like clickable links (surprised i just saw this).
  3. "Data controls" might need better wording. Possibly break that into "Forms" and "Navigation" which is more clear?
  4. Should we maybe change our homepage to link quickly to our most used components (Forms, icons, flex, buttons...etc). Could use the card system for this. Guessing @cchaos or I could do this.
  5. Let's very briefly figure out the future of sandboxes and where they fit in here. Are these things we merge and plan on growing? Do we just never merge them? Right now they are packaged into our dist.

@gchaps
Copy link
Contributor

gchaps commented Feb 21, 2018

Yep, let's zoom. I'm worried that we're getting away from some of the wording that users might look for. Navigation and Components come to mind. Also, we need to fit in the Guidelines.

I like the idea for the front page rewrite. Color and Spacing are important, but I feel they are hidden on the front page. We should have a link to them in our left nav bar.

I looked at a lot of other design systems. Most collapse.

Also, two things we might consider:

--Search box at the top of the side nav to search the contents of the nav
--Links down the page

@cjcenizal
Copy link
Contributor Author

Todo:

  • Sidenav search is broke.
  • Break data controls into forms and navigation.
  • Put tabs and steps into navigation.
  • Rename content to display.
  • Move tables to display.
  • Delete sandboxes.
  • Put text scales into a guideline.
  • Use spaces in navigation item labels.

@cjcenizal
Copy link
Contributor Author

@gchaps @snide @cchaos Ready for another look.

Guidelines

Writing
Text scales

Layout

Accordion
Bottom Bar
Card
Flex
Flyout
Header
Horizontal Rule
Modal
Page
Panel
Popover
Spacer

Navigation

Button
Context Menu
Key Pad Menu
Link
Pagination
Side Nav
Steps
Tabs

Display

Avatar
Badge
Call Out
Code
Description List
Health
Icons
Image
Loading
Progress
Tables
Table Of Records
Text
Title
Toast
Tooltip

Forms

Code Editor
Color Picker
Expression
File Picker
Filter Group
Form
Search Bar

Utilities

Accessibility
Delay Hide
Error Boundary
Is Color Dark
Outside Click Detector

@gchaps
Copy link
Contributor

gchaps commented Feb 21, 2018

I like the buckets. Layout and Display seem very similar to me, as in an arrangement of things. Layout is good, my concern is more with Display. My only suggestion is App Layout and Data Display, but I know there was some concern with "Data"

@cjcenizal
Copy link
Contributor Author

@gchaps I agree there's some ambiguity there. I'd like to merge this as-is but keep an eye on how people respond to the docs. If there's a lot of confusion let's change the names.

@cchaos
Copy link
Contributor

cchaos commented Feb 21, 2018

My edits would be to:

  • Change 'Display' to 'Display content'
  • Move 'Card' to 'Display content' -- to me it's more than purely layout, it require specific content.
  • I'm on the fence about 'Popover' being in 'Layout' because it's literally not within the document layout because of it's positioning. And, again, I'm thinking in engineer terms who will be the main user of this guide.

I know we're starting to add more sections back in, but I really liked the idea of separating out the "Feedback/Messaging" elements. Grouping them in with the general "Display content", to me, makes me worried they'd be over-used and incorrectly used.

@cjcenizal
Copy link
Contributor Author

@cchaos I moved the Card to Display, but I've left the naming as-is and left Popover in Layout (I'm on the fence too). Let's let this marinate with people and make changes after people have had some time to try this out and give feedback.

@snide
Copy link
Contributor

snide commented Feb 21, 2018

Ultimately we'll all want something different. Following our normal "tie goes to the runner" mentality, since CJ made the PR, he can own the calls. This is something we can always change later as we see how people respond.

@cjcenizal cjcenizal merged commit 58fb2ad into elastic:master Feb 21, 2018
@cjcenizal cjcenizal deleted the content-organization branch February 21, 2018 22:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants